<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto" :disabled="type === 'view' ? true : false">
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="标签名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入标签名称" clearable />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item prop="icon">
						<template #label>
							标签图标<br />
							宽600以内高50<br />
							大小不超过2M
						</template>
						<image-upload-cOS v-model="form.icon" path="goods/label" :isDelete="type === 'view' ? true : false" ref="imageUploadIconRef" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="排序" prop="display_order">
						<el-input v-model="form.display_order" placeholder="请输入排序" @input="verifiyNumberIntegerDisplayOrder" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="风格方式" prop="style">
						<el-select v-model="form.style" class="w100">
							<el-option label="一行一个" :value="1" />
							<el-option label="一行两个" :value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" class="mb20">
				<el-col :span="24">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { nextTick, reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { tagsApi } from '/@/api/admin';
import { verifiyNumberInteger } from '/@/utils/toolsValidate';

const TagsApi = tagsApi();
export default {
	setup() {
		const state = reactive({
			title: '',
			type: '',
			open: false,
			tabsName: '1',
			form: {} as any,
			rules: {
				name: [{ required: true, message: '标签名称不能为空', trigger: ['blur'] }],
				icon: [{ required: true, message: '标签图标不能为空', trigger: ['blur', 'change'] }],
				style: [{ required: true, message: '风格方式不能为空', trigger: ['blur', 'change'] }],
				display_order: [{ required: true, message: '排序不能为空', trigger: ['blur'] }],
			}, // 表单校验
			submitLoading: false,
		});

		const formRef = ref(null);
		const imageUploadIconRef = ref(null);
		let callback: Function = () => {};

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					if (state.type === 'add') {
						_tagsAdd({
							...state.form,
							icon: state.form.icon.replace(import.meta.env.VITE_FILE_API, ''),
						});
					} else {
						_tagsEdit({
							...state.form,
							icon: state.form.icon.replace(import.meta.env.VITE_FILE_API, ''),
						});
					}
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			state.open = true;
			state.type = config.type;
			if (config.type === 'add') {
				state.title = '添加标签';
			} else if (config.type === 'edit') {
				state.title = '修改标签';
			} else {
				state.title = '查看标签';
			}
			reset();
			callback = fn;
			if (config.type === 'edit') {
				state.form = { ...config.row, tags_id: config.row.id };
			} else if (config.type === 'view') {
				state.form = { ...config.row, tags_id: config.row.id };
			}
			nextTick(() => {
				(imageUploadIconRef.value as any)?.dataLoading();
			});
		};
		// 表单重置
		const reset = () => {
			state.form = {
				name: '',
				icon: '',
				style: '',
				display_order: '',
				status: 1,
			};
			(formRef.value as any)?.resetFields();
			nextTick(() => {
				(imageUploadIconRef.value as any)?.reset();
			});
		};

		// 排序
		const verifiyNumberIntegerDisplayOrder = (val: string) => {
			state.form.display_order = verifiyNumberInteger(val);
		};

		/********** 网络事件 **********/
		// 商品标签添加
		const _tagsAdd = (_data: object) => {
			TagsApi.tagsAdd(_data)
				.then(() => {
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};
		// 商品标签编辑
		const _tagsEdit = (_data: object) => {
			TagsApi.tagsEdit(_data)
				.then(() => {
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => {
					state.submitLoading = false;
				});
		};

		return {
			formRef,
			imageUploadIconRef,
			openDialog,
			verifiyNumberIntegerDisplayOrder,
			onSubmitForm,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
